<template>
	<view class="m-arrange" v-if="show">
		<u-modal v-model="show" width="100%" :showTitle="false" :mask-close-able="false" :show-confirm-button="false">

			<view class="content-box">
				<!--  -->
				<view class="m-back" :style="{top:100+'rpx'}">
					<view class="back-content-box blackBg" @click="handleCloseModal">
						<view class="left-icon" :class="{flexIcon: !backName}">
							<image class="icon-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b6bc1e7c399147079b776bc0acc242a6.png"
								mode=""></image>
						</view>
						<view class="right-text">{{backName}}</view>
					</view>
				</view>
				<!--  -->
				<view class="top-box"></view>
				<view class="top-power">阵容舞力：<text class="number-text">25000</text></view>
				<view class="top-card-slot">
					<view class="person-card-slots">
						<view class="solt-item" @click="handleSlotItemClick(index,item,'person')"
							:class="{'active-slot-item':(activePersonSlotIndex==index)&&(activeType=='person')}"
							v-for="(item,index) in personSlotList" :key="index">
							<image class="icon-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/4dcb7a0047f7468f9a20e620d69b2d92.png"
								mode=""></image>
							<view class="top-number">
								<!-- <view class="number-content">{{index+1}}</view> -->
							</view>
							<view class="bottom-tip">出场顺序[{{index+1}}]</view>

							<view class="fillData" v-if="item">
								<image v-if="item.image" class="item-image" :src="item.image" mode="widthFix"></image>

								<view class="bottom-info">
									<view class="top-start">
										<!-- 	<u-rate :size="20" :count="5" active-color="#faf992" v-model="item.start"
											:disabled="true"></u-rate> -->

										<view class="start-item" v-for="(sitem,sindex) in getStartList(item.start,5)"
											:key="sindex">
											<image class="start-img" v-if="sitem.active"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
												mode="aspectFill"></image>

											<image class="start-img" v-else
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7dcdf112c1e14b4e88da52afcc3b96bb.png"
												mode="aspectFill"></image>
										</view>
									</view>


									<view class="bottom-name">{{item.name}}</view>

								</view>
								<!-- 			<view class="top-type-name">
									<text v-if="item.type=='person'">舞姬</text>
									<text v-else>道具</text>
								</view> -->
							</view>
							<view class="rarity-level" v-if="item.type=='person'">
								<image class="rl-img" v-if="item.RarityLevel==4"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/247f5d1c0a5247a487336c52f34a1a76.png"
									mode="aspectFill"></image>
								<image class="rl-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1ee25285760a4ca1b3162331362f01ba.png"
									mode="aspectFill" v-if="item.RarityLevel==3"></image>
								<image class="rl-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/758444cd41804eae8906866c80f5efd5.png"
									mode="aspectFill" v-if="item.RarityLevel==2"></image>
								<image class="rl-img" v-if="item.RarityLevel==1"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/93cd8b6a4c1949a0b6d2d3d1c000385c.png"
									mode="aspectFill"></image>
							</view>

							<view class="level-number" v-if="item.level">
								Lv.<text class="level-text">{{item.level}}</text>
							</view>
						</view>
						<view class="right-tip">出征舞姬</view>
					</view>
					<view class="prop-card-slots">
						<view class="solt-item" @click="handleSlotItemClick(index,item,'prop')"
							:class="{'active-slot-item':(acitvePropSlotIndex==index)&&(activeType=='prop')}"
							v-for="(item,index) in propSlotList" :key="index">
							<image class="icon-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/22719cba412c4ea7a1500c048770353b.png"
								mode=""></image>
							<view class="top-number">
								<!-- <view class="number-content">{{index+1}}</view> -->
							</view>
							<view class="bottom-tip">装备道具卡</view>

							<view class="fillData" v-if="item">
								<image v-if="item.image" class="item-image" :src="item.image" mode="widthFix"></image>

								<view class="bottom-info">
									<view class="top-start">
										<!-- <u-rate :size="20" :count="5" active-color="#faf992" v-model="item.start"
											:disabled="true"></u-rate> -->

										<view class="start-item" v-for="(sitem,sindex) in getStartList(item.start,5)"
											:key="sindex">
											<image class="start-img" v-if="sitem.active"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
												mode="aspectFill"></image>

											<image class="start-img" v-else
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7dcdf112c1e14b4e88da52afcc3b96bb.png"
												mode="aspectFill"></image>
										</view>
									</view>
									<view class="bottom-name">{{item.name}}</view>

								</view>
								<!-- 					<view class="top-type-name">
									<text v-if="item.type=='person'">舞姬</text>
									<text v-else>道具</text>
								</view> -->
							</view>

						</view>
						<view class="right-tip">装备道具</view>
					</view>

				</view>
				<!-- 				<view class="attr-box">
					<view class="left-attr-list">
						<view class="attr-item" v-for="(item,index) in attrList" :key="index">
							<image class="attr-item-img" :src="item.image"></image>
							<view class="attr-item-name">{{item.name}}</view>
							<view class="attr-item-num">{{item.num}}</view>
						</view>

						<view class="tip-box">
							点击列表中的卡牌，放入上方阵容
						</view>
					</view>
					<view class="right-save">
						<view class="save-btn" @click="handleSave">保存</view>
					</view>

				</view> -->



				<view class="bottom-card-choose">
					<view class="top-tip">
						<view class="line"></view>
						<view class="center-text">点击选择<text class="text-color">出征舞姬</text>和<text
								class="text-color">装备道具</text></view>
						<view class="line"></view>
					</view>
					<scroll-view ref="scrollView" scroll-y class="bottom-card" :show-scrollbar="false"
						:scroll-with-animation="true">
						<view class="card-list">
							<view class="card-item" @click="handleCardClick(index,item)"
								:class="{'empty-item':item.isEmpty,'active-card-item':activeCardIndex==index}"
								v-for="(item,index) in useData" :key="index">
								<image v-if="item.image" class="item-image" :src="item.image" mode="widthFix"></image>

								<view class="bottom-info">
									<view class="top-start">
										<!-- 	<u-rate :size="20" :count="5" active-color="#faf992" v-model="item.start"
											:disabled="true"></u-rate> -->

										<view class="start-item" v-for="(sitem,sindex) in getStartList(item.start,5)"
											:key="sindex">
											<image class="start-img" v-if="sitem.active"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
												mode="aspectFill"></image>

											<image class="start-img" v-else
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7dcdf112c1e14b4e88da52afcc3b96bb.png"
												mode="aspectFill"></image>
										</view>


									</view>
									<view class="bottom-name">{{item.name}}</view>

								</view>
								<view class="masker" v-if="item.disabled">
									<image class="disabled-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/50e752e9ddae470393b1c33f7e99f75f.png"
										mode=""></image>

								</view>

								<!-- 		<view class="top-type-name">
									<text v-if="item.type=='person'">舞姬</text>
									<text v-else>道具</text>
								</view> -->

								<view class="rarity-level" v-if="item.type=='person'">
									<image class="rl-img" v-if="item.RarityLevel==4"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/247f5d1c0a5247a487336c52f34a1a76.png"
										mode="aspectFill"></image>
									<image class="rl-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1ee25285760a4ca1b3162331362f01ba.png"
										mode="aspectFill" v-if="item.RarityLevel==3"></image>
									<image class="rl-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/758444cd41804eae8906866c80f5efd5.png"
										mode="aspectFill" v-if="item.RarityLevel==2"></image>
									<image class="rl-img" v-if="item.RarityLevel==1"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/93cd8b6a4c1949a0b6d2d3d1c000385c.png"
										mode="aspectFill"></image>
								</view>

								<view class="level-number" v-if="item.level">
									Lv.<text class="level-text">{{item.level}}</text>
								</view>

							</view>


						</view>
					</scroll-view>

				</view>

				<view class="control-btn">
					<view class="team-new-tab">
						<view class="bag-tab-item" @click="handleBtnClick" :class="{'bag-active-tabItem':index==1}"
							v-for="(item,index) in btnList" :key="index">
							<view class="top-tabName">{{item.name}}</view>
							<!-- <view class="bottom-tabType">{{item.type}}</view> -->
						</view>
					</view>
				</view>
			</view>

		</u-modal>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnList: [{
						name: "一键上阵",
						type: 'one'
					},
					{
						name: "保存阵容",
						type: 'two'
					},
				],
				activeType: "",
				attrList: [{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8c2c36941572456a978ad6fbcad45602.png",
						num: 12,
						name: "技巧"
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2b42afe4606645e0915ebd9546e2ef6b.png",
						num: 10,
						name: "体力"
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6b1d127e33c842758314b4ca50ec3d58.png",
						num: 20,
						name: "魅力"
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/605771d090a143cfbbd8096053fd8cfd.png",
						num: 4,
						name: "创意"
					},
				],
				activePersonSlotIndex: -1,
				acitvePropSlotIndex: -1,
				personSlotList: ["", "", ""],
				propSlotList: ["", "", ""],
				activeCardIndex: -1,
				type: "all",
				backName: "出征阵容",
				show: false,
				chooseCardList: [],
				allCardList: [

				],
				useData: []
			}
		},
		mounted() {
			this.handleGetData()
		},
		computed: {
			personChoosedIds() {
				let ids = this.personSlotList.map((item, index) => {
					if (item) {
						return item.id
					} else {
						return ""
					}
				})
				return ids
			},
			propChoosedIds() {
				let ids = this.propSlotList.map((item, index) => {
					if (item) {
						return item.id
					} else {
						return ""
					}
				})

				return ids
			}
		},
		methods: {
			getStartList(number, total = 5) {
				let arr = []

				for (let i = 0; i < number; i++) {
					arr.push({
						active: true
					})
				}

				for (let i = 0; i < (total - number); i++) {
					arr.push({
						active: false
					})
				}

				return arr

			},
			handleBtnClick(btn) {

			},
			open() {
				this.show = true
			},
			handleUpdateCardStatus() {
				this.useData.forEach((item, index) => {
					let flag1 = this.personChoosedIds.includes(item.id)
					let flag2 = this.propChoosedIds.includes(item.id)
					let flag3 = this.activeType && item.type != this.activeType
					if (flag1 || flag2 || flag3) {
						// let obj = {...item}
						// obj.disabled = true
						// this.$set(this.useData,index,obj)
						item.disabled = true
					} else {
						item.disabled = false
					}
				})

			},
			handleSlotItemClick(index, item, type) {
				this.activeType = type
				if (type == 'person') {
					this.activePersonSlotIndex = index
				} else if (type == 'prop') {
					this.acitvePropSlotIndex = index
				}
				this.handleUpdateCardStatus()
			},
			handleSave() {
				let emptyPersons = this.personSlotList.filter((item, index) => {
					return !item
				})
				let emptyProps = this.propSlotList.filter((item, index) => {
					return !item
				})

				if (emptyPersons.length || emptyProps.length) {
					uni.showToast({
						icon: "none",
						title: "请先将卡槽填充完毕"
					})
				} else {
					// 走保存
					this.show = false

				}

			},
			handleCardClick(index, item) {
				if (!item.isEmpty && !item.disabled) {
					this.activeType = item.type
					this.activeCardIndex = index
					if (item.type == 'person') {
						if (this.activePersonSlotIndex == -1) {
							this.activePersonSlotIndex = 0
							this.personSlotList.splice(this.activePersonSlotIndex, 1, item)

						} else {
							this.personSlotList.splice(this.activePersonSlotIndex, 1, item)
						}

					} else if (item.type == 'prop') {

						if (this.acitvePropSlotIndex == -1) {
							this.acitvePropSlotIndex = 0
							this.propSlotList.splice(this.acitvePropSlotIndex, 1, item)

						} else {
							this.propSlotList.splice(this.acitvePropSlotIndex, 1, item)
						}

					}
					this.handleUpdateCardStatus()
				}
			},
			handleTypeChange(type) {
				this.type = type
				if (type && type != 'all') {
					this.useData = this.allCardList.filter((item, index) => {
						return item.type == type
					})
				} else {
					this.useData = [...this.allCardList]
				}
				this.handleCardsData()

			},
			handleGetData() {
				// 之后走异步
				this.allCardList = [{
						id: 0,
						name: "秘书·白领制服",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						type: "person",
						start: 3,
						RarityLevel: 4,
						level: 30
					},
					{
						id: 1,
						name: "秘书·制服诱惑",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						type: "person",
						start: 5,
						RarityLevel: 4,
						level: 31
					},
					{
						id: 2,
						name: "秘书·清纯可爱",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						type: "person",
						start: 4,
						RarityLevel: 4,
						level: 28
					},
					{
						id: 3,
						name: "米娜·魅力米娜",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						type: "person",
						start: 3,
						RarityLevel: 3,
						level: 30
					},
					{
						id: 4,
						name: "米娜·舞力全开",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/14784ddce0aa47f6b44d09e769e371e3.jpg",
						type: "person",
						start: 3,
						RarityLevel: 3,
						level: 33
					},
					{
						id: 5,
						name: "妙陈·幸运女神",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/78add5080d4f4a229f87daa847caad2e.jpg",
						type: "person",
						start: 5,
						RarityLevel: 3,
						level: 35
					},
					{
						id: 6,
						name: "妙陈·泳装教练",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2c2955b41ebf45e9ac2112f219cd7373.jpg",
						type: "person",
						start: 4,
						RarityLevel: 2,
						level: 32
					},
					{
						id: 7,
						name: "妙陈·兔兔警官",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d82a4c86df524fdb82088d48754ea85e.png",
						type: "person",
						start: 3,
						RarityLevel: 2,
						level: 28
					},

					{
						id: 8,
						name: "超级跑车",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/haohuapaoche.png",
						type: "prop",
						start: 5,
					},

					{
						id: 9,
						name: "星舟泛心",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/xingzhoufanxin.png",
						type: "prop",
						start: 3
					},
					{
						id: 10,
						name: "豪华游艇",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/haohuayouting.png",
						type: "prop",
						start: 5
					},
					{
						id: 11,
						name: "私人飞机",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/feiji.png",
						type: "prop",
						start: 5
					},
					{
						id: 12,
						name: "浪漫满屋",
						image: "https://cdn.osisx.com/wenzhu/images/gifts/rose.png",
						type: "prop",
						start: 4
					},

				]
				this.handleTypeChange(this.type)
			},
			handleCardsData() {

				let length = this.useData.length
				let emptyData = {
					name: "",
					image: "",
					type: "",
					isEmpty: true
				}
				let less = length % 4
				let needLength
				if (length >= 4) {
					needLength = less == 0 ? 0 : 4 - less
				} else {
					needLength = 4 - length
				}

				if (needLength !== 0) {

					for (let i = 0; i < needLength; i++) {
						this.useData.push(emptyData)
					}
				}
			},
			handleCloseModal() {
				this.show = false
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-arrange {
		pointer-events: fill;
	}

	.content-box {
		width: 100vw;
		height: 100vh;
		// background-image: url("https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c6a1d497484649c091b5c7ebb1bf251c.jpg");
		// background-repeat: no-repeat;
		// background-position: center center;
		// background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;


		background-color: rgba(255, 255, 255, 0);
		backdrop-filter: blur(15rpx);

		.top-box {
			width: 100%;
			height: 140rpx;
		}

		.top-power {
			width: 100%;
			height: 40rpx;
			text-align: center;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #fff;
			margin-bottom: 20rpx;
			font-weight: 700;

			.number-text {
				color: #e5dfb4
			}
		}

		.top-card-slot {
			// position: absolute;
			// left: 0rpx;
			// top: 200rpx;
			width: 100vw;
			height: 540rpx;

			.person-card-slots,
			.prop-card-slots {
				position: relative;

				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.right-tip {
					position: absolute;
					left: 25rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 30rpx;
					font-size: 18rpx;
					line-height: 25rpx;
					text-align: center;
					color: #fff;
					background-color: rgba(0, 0, 0, .3);
					border-radius: 10rpx;
					padding: 5rpx;
					box-sizing: content-box;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					opacity: 0.6;

				}

				.solt-item {
					position: relative;
					width: 180rpx;
					height: 245rpx;
					background-color: #fff;
					margin-right: 20rpx;
					border-radius: 10rpx;
					// background-color: #4f6185;
					background-color: rgba(0, 0, 0, .4);
					// border: 2rpx solid transparent;
					overflow: hidden;
					box-shadow: 0rpx 0rpx 1rpx #fff;

					.level-number {
						position: absolute;
						right: -1rpx;
						top: 0rpx;
						font-size: 18rpx;
						line-height: 30rpx;
						color: #fff;
						z-index: 999999;

						width: 80rpx;
						height: 30rpx;
						background: linear-gradient(to left, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%);
						padding-right: 10rpx;
						text-align: right;

						.level-text {
							color: #f3ecbb;
						}
					}

					.rarity-level {
						position: absolute;
						left: 8rpx;
						top: 2rpx;
						width: 85rpx;
						height: 42rpx;
						z-index: 999999;

						.rl-img {
							width: 100%;
							height: 100%;
						}

					}


					.icon-img {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 100rpx;
						height: 100rpx;
						z-index: 1;
						opacity: 0.3;

					}

					&:nth-child(3n) {
						margin-right: 0rpx;
					}

					.top-number {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 100%;
						height: 30rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						z-index: 999;

						.number-content {
							display: inline-block;
							padding: 10rpx;
							color: #fff;
							font-size: 18rpx;
							font-weight: 700;
							line-height: 18rpx;
							opacity: 0.3;
						}
					}

					.bottom-tip {
						position: absolute;
						left: 0rpx;
						bottom: 10rpx;
						width: 100%;
						height: 30rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 18rpx;
						line-height: 18rpx;
						color: #fff;
						z-index: 3;
						opacity: 0.3;

					}

					.fillData {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 100%;
						height: 100%;
						background-color: #fff;
						z-index: 9999;

						.item-image {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							z-index: 1;

						}

						.bottom-info {
							position: absolute;
							left: 0rpx;
							bottom: -1rpx;
							width: 100%;
							height: 70rpx;
							// background: linear-gradient(180deg, rgba(10, 7, 27, 0) 0%, #06050b 100%);
							background: linear-gradient(180deg, rgba(10, 7, 27, 0) 0%, rgba(0, 0, 0, .6) 100%);
							z-index: 2;
							display: flex;
							flex-direction: column;
							justify-content: flex-end;

							.top-start {
								width: 100%;
								height: 30rpx;
								box-sizing: border-box;
								// background-color: pink;
								display: flex;
								justify-content: flex-start;
								align-items: center;
								padding-left: 8rpx;



								.start-item {
									width: 25rpx;
									height: 25rpx;
									display: flex;
									justify-content: center;
									align-items: center;

									.start-img {
										width: 100%;
										height: 100%;
									}
								}
							}

							.bottom-name {
								width: 100%;
								display: flex;
								justify-content: flex-start;
								font-size: 18rpx;
								line-height: 18rpx;
								color: #fff;
								text-shadow: rgba(0, 0, 0, .3);
								// margin-top: 15rpx;
								margin-bottom: 10rpx;
								margin-top: 5rpx;
								box-sizing: border-box;
								padding-left: 10rpx;
							}

						}

						.top-type-name {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 30rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							font-size: 24rpx;
							line-height: 24rpx;
							font-weight: 700;
							color: #fff;
							text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .6);
							padding-left: 10rpx;
							z-index: 9;
						}


					}

				}

				.active-slot-item {
					border-color: #fff;
					box-shadow: 0rpx 0rpx 10rpx #fff;
					// animation: breathBox 1s linear infinite;
				}

				@keyframes breathBox {
					0% {
						transform: scale(1);
					}

					50% {
						transform: scale(1.05);
					}

					100% {
						transform: scale(1);
					}
				}

			}

			.person-card-slots {
				margin-bottom: 20rpx;
			}

		}

		.attr-box {
			position: absolute;
			left: 0rpx;
			top: 740rpx;
			width: 100vw;
			// background-color: pink;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.left-attr-list {
				position: relative;
				width: 300rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				margin-left: 50rpx;

				.attr-item {
					width: 50%;
					height: 40rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.attr-item-img {
						width: 25rpx;
						height: 25rpx;
						margin-right: 10rpx;

					}

					.attr-item-name,
					.attr-item-num {
						font-size: 20rpx;
						color: #fff;
						font-weight: 700;
						line-height: 20rpx;
						margin-right: 10rpx;
					}
				}

				.tip-box {
					position: absolute;
					left: 0rpx;
					top: 85rpx;
					width: 100vw;
					font-size: 20rpx;
					line-height: 30rpx;
					height: 30rpx;
					font-weight: 700;
					color: #e5dfb4;
					// background-color: pink;
					// background-color: pink;



				}
			}

			.right-save {
				flex: 1;
				// background-color: rgba(0, 0, 0, .3);
				// background-color: #fff;
				position: relative;

				.save-btn {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 200rpx;
					height: 50rpx;
					// background-image: linear-gradient(to right, #eff0c4, #eecf7b);
					font-size: 30rpx;
					line-height: 50rpx;
					border-radius: 10rpx;
					font-weight: 700;
					// color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #fadd8c;
					box-shadow: 0 0 10rpx #fadd8c;
					color: #572c0d;


				}

			}
		}


		.bottom-card-choose {
			position: relative;
			// position: absolute;
			// left: 0rpx;
			bottom: 0rpx;
			width: 100vw;
			height: 45vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.shadow {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 40rpx;
				/* 阴影的高度 */
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent);
				pointer-events: none;
				/* 让阴影不阻挡滚动 */
				opacity: 0.3;
				/* 初始透明度为0 */
			}

			.top-tip {
				// position: absolute;
				// left: 0rpx;
				// top: 0rpx;
				width: 100%;
				height: 50rpx;
				z-index: 11;
				display: flex;
				justify-content: center;
				align-items: center;

				.line {
					width: 150rpx;
					height: 2rpx;
					background-color: rgba(255, 255, 255, .6);
					opacity: 0.6;
				}

				.center-text {
					font-size: 20rpx;
					height: 100%;
					line-height: 50rpx;
					color: #fff;
					padding: 0 20rpx;
					text-align: center;

					.text-color {
						color: #e5dfb4;
					}
				}

			}

			.bottom-card {
				width: 100vw;
				// height: 100%;
				// background-color: pink;
				flex: 1;
				overflow: hidden;

				.card-list {
					padding: 30rpx 0rpx;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-wrap: wrap;
					padding-top: 10rpx;

					.card-item {
						position: relative;
						width: 140rpx;
						height: 200rpx;
						border-radius: 10rpx;
						background-color: #fff;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						overflow: hidden;
						box-shadow: 0 0 4rpx rgba(0, 0, 0, .6);

						&:nth-child(4n) {
							margin-right: 0rpx;
						}

						.level-number {
							position: absolute;
							right: -1rpx;
							top: -1rpx;
							font-size: 16rpx;
							line-height: 16rpx;
							color: #fff;
							z-index: 12;
							width: 80rpx;
							height: 26rpx;
							line-height: 26rpx;
							padding-right: 10rpx;
							background: linear-gradient(to left, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%);
							text-align: right;

							.level-text {
								color: #f3ecbb;
							}
						}

						.rarity-level {
							position: absolute;
							left: 8rpx;
							top: 2rpx;
							width: 60rpx;
							height: 30rpx;
							z-index: 10;

							.rl-img {
								width: 100%;
								height: 100%;
							}

						}

						.masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, .6);
							z-index: 9;
							display: flex;
							justify-content: center;
							align-items: center;

							.disabled-img {
								width: 60rpx;
								height: 60rpx;
								opacity: 0.6;

							}
						}

						.top-type-name {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 30rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							font-size: 24rpx;
							line-height: 24rpx;
							font-weight: 700;
							color: #fff;
							text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .6);
							padding-left: 10rpx;
							z-index: 9;
						}

						.item-image {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							z-index: 1;

						}

						.bottom-info {
							position: absolute;
							left: 0rpx;
							bottom: -1rpx;
							width: 100%;
							height: 70rpx;
							// background: linear-gradient(180deg, rgba(10, 7, 27, 0) 0%, #06050b 100%);
							background: linear-gradient(180deg, rgba(10, 7, 27, 0) 0%, rgba(0, 0, 0, .6) 100%);
							z-index: 2;
							display: flex;
							flex-direction: column;
							justify-content: flex-end;


							.top-start {
								width: 100%;
								height: 25rpx;
								box-sizing: border-box;
								// background-color: pink;
								display: flex;
								justify-content: flex-start;
								align-items: center;
								padding-left: 8rpx;


								.start-item {

									width: 18rpx;
									height: 18rpx;
									display: flex;
									justify-content: center;
									align-items: center;

									.start-img {
										width: 100%;
										height: 100%;
									}
								}


							}

							.bottom-name {
								width: 100%;
								display: flex;
								justify-content: flex-start;
								font-size: 15rpx;
								line-height: 15rpx;
								color: #fff;
								text-shadow: rgba(0, 0, 0, .3);
								// margin-top: 15rpx;
								margin-bottom: 10rpx;
								margin-top: 5rpx;
								box-sizing: border-box;
								padding-left: 10rpx;
							}

						}

					}

					.active-card-item {
						.item-image {
							animation: imageScale 0.2s linear;
						}
					}


					@keyframes imageScale {
						0% {
							transform: scale(1);
						}

						50% {
							transform: scale(1.1);
						}

						100% {
							transform: scale(1);
						}

					}

					.empty-item {
						opacity: 0;
					}
				}

			}

		}

		.control-btn {
			width: 100%;
			flex: 1;

			.team-new-tab {
				// position: absolute;
				// left: 0rpx;
				// top: 180rpx;
				bottom: 20rpx;
				width: 100vw;
				// height: 150rpx;
				// background-color: pink;
				box-sizing: border-box;
				padding: 0 60rpx;
				display: flex;
				justify-content: flex-start;
				padding-top: 40rpx;

				.bag-tab-item {
					flex: 1;
					// height: 80rpx;
					height: 65rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					// background-color: #2c2c2c;
					background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
					color: #646369;
					margin-right: 20rpx;
					// border-bottom-left-radius: 10rpx;
					// border-bottom-right-radius: 10rpx;
					border-radius: 8rpx;
					overflow: hidden;
					box-shadow: 0 0 4rpx rgba(0, 0, 0, .6);

					.top-tabName {
						font-size: 24rpx;
						font-weight: 700;
					}

					.bottom-tabType {
						font-size: 18rpx;
					}

					&:last-child {
						margin-right: 0rpx;
					}
				}

				.bag-active-tabItem {
					// background-color: #fff;
					// color: #2d2d2d;



					// background-color: #fadd8c;
					// box-shadow: 0 0 10rpx #fadd8c;
					// color: #572c0d;


					background-image: linear-gradient(to right, #f3f1c6, #efcf80);
					color: #b27439;
					animation: bagTabScale 0.2s linear;



				}

				@keyframes bagTabScale {
					0% {
						transform: scale(1);
					}

					50% {
						transform: scale(1.1);
					}

					100% {
						transform: scale(1);
					}

				}
			}
		}

	}


	.m-back {
		position: absolute;
		width: 100vw;
		height: 50rpx;
		z-index: 99999999;

		.back-content-box {
			height: 100%;
			display: inline-block;
			border-top-right-radius: 25rpx;
			border-bottom-right-radius: 25rpx;

			padding-right: 20rpx;


			.left-icon {
				width: 45rpx;
				height: 50rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				display: inline-block;
				margin-left: 5rpx;

				.icon-img {
					width: 30rpx;
					height: 30rpx;
					object-fit: cover;
					vertical-align: middle;
				}
			}

			.flexIcon {
				width: 45rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}



			.right-text {
				height: 50rpx;
				font-size: 24rpx;
				color: #fff;
				line-height: 50rpx;
				text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
				display: inline-block;
				font-weight: 700;
			}
		}

		.blackBg {
			background-color: rgba(0, 0, 0, .6);
		}


	}
</style>